<template>
  <view class="ai-practice-container">
    <v-statusbar class="status-bar"></v-statusbar>

    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left">
        <view class="back-btn" @click="navigateBack">
          <uni-icons type="left" size="24"></uni-icons>
        </view>
        <view class="page-title">AI随堂练习</view>
      </view>
    </view>

    <!-- 推荐练习 -->
    <view class="recommended-section">
      <view class="section-header">
        <view class="section-title">为您推荐</view>
      </view>
      <view class="recommendations-list">
        <view v-for="(item, index) in recommendations" :key="index" class="recommendation-item">
          <view class="recommendation-icon">
            <image :src="item.icon" mode="aspectFit"></image>
          </view>
          <view class="recommendation-info">
            <view class="recommendation-title">{{ item.title }}</view>
            <view class="recommendation-meta">
              <view class="meta-item">
                <uni-icons type="file-text" size="16" color="#999"></uni-icons>
                <text>{{ item.questionCount }}题</text>
              </view>
              <view class="meta-item">
                <uni-icons type="clock" size="16" color="#999"></uni-icons>
                <text>约{{ item.duration }}分钟</text>
              </view>
              <view class="meta-item">
                <uni-icons type="star" size="16" color="#FFD700"></uni-icons>
                <text>{{ item.difficulty }}</text>
              </view>
            </view>
          </view>
          <view class="start-btn" @click="startPractice(item.id)">开始</view>
        </view>

        <!-- 自定义出题按钮 - 移到推荐列表最下方 -->
        <view class="custom-button-container">
          <view class="custom-button" @click="openCustomPopup">
            <view class="custom-button-icon">
              <uni-icons type="edit" size="24"></uni-icons>
            </view>
            <view class="custom-button-text">知识点出题</view>
            <uni-icons class="custom-button-arrow" type="right" size="20"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 常见问题 -->
    <view class="frequently-asked-section">
      <view class="section-title">常见问题</view>
      <view class="faq-list">
        <view v-for="(faq, index) in faqs" :key="index" class="faq-item">
          <view class="faq-question" @click="toggleFaq(index)">
            <text>{{ faq.question }}</text>
            <uni-icons :type="expandedFaq === index ? 'up' : 'down'" size="20" color="#999"></uni-icons>
          </view>
          <view v-if="expandedFaq === index" class="faq-answer">
            <text>{{ faq.answer }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义出题弹出框 -->
    <uni-popup ref="customPopup" type="center">
      <view class="custom-popup-content">
        <view class="popup-title">知识点出题</view>
        <view class="popup-form">
          <view class="form-item">
            <view class="form-label">题目关键词</view>
            <input class="form-input" v-model="customKeywords" placeholder="请输入相关知识点"></input>
          </view>

          <view class="form-item">
            <view class="form-label">题数</view>
            <input class="form-input" v-model="customQuestionCount" type="number" placeholder="请输入数量，限10题内" />
          </view>
          <view class="form-item">
            <view class="form-tip">需要的题数越多，将会对应等待更久时间</view>
          </view>
        </view>
        <view class="popup-buttons">
          <button class="cancel-button" @click="closeCustomPopup">取消</button>
          <button class="confirm-button" @click="confirmCustomPractice">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import mixins from '@/mixins'
import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import uniPopup from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'

export default {
  mixins: [mixins],
  name: 'ai-practice',
  components: {
    uniIcons,
    uniPopup
  },
  data() {
    return {
      expandedFaq: -1,
      recommendations: [],
      faqs: [
        {
          question: '智能练习是如何个性化推荐题目的？',
          answer: '智能练习基于您的学习历史、答题情况和知识点掌握程度，通过AI算法为您推荐最适合的练习内容，帮助您高效提升学习效果。'
        },
        {
          question: '如何查看我的学习进度和效果？',
          answer: '您可以在学习数据板块查看您的连续学习天数、今日进度和周平均分等关键指标，还可以通过考情分析功能获取更详细的学习报告。'
        },
        {
          question: '练习过程中遇到不会的题目怎么办？',
          answer: '在练习过程中，您可以随时查看题目解析和相关知识点，也可以使用AI学习助手功能，直接向AI提问获取帮助。'
        }
      ],
      // 自定义出题相关数据
      customKeywords: '',
      customQuestionCount: ''
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    // 初始化数据
    async initData() {
      try {
        // 从服务器加载实际的练习数据
        await this.loadLastThreeCourses()
      } catch (error) {
        console.error('初始化数据失败:', error)
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        })
      }
    },

    // 加载最后三个课程数据
    async loadLastThreeCourses() {
      try {
        const data = await this.$axios.get("/api/study/course/studyCourse/schedulelist")

        // 确保返回的数据是数组
        if (!Array.isArray(data)) {
          this.recommendations = []
          return
        }

        // 直接截取最后三个课程
        const lastThreeCourses = data.slice(-3)

        // 将最后三个课程转换为推荐练习的格式，并固定题数、时间和难度
        this.recommendations = lastThreeCourses.map((course, index) => {
          // 根据不同的课程设置不同的图标
          let icon = '/static/image/AI/practice1.png'
          if (index === 1) {
            icon = '/static/image/AI/practice2.png'
          } else if (index === 2) {
            icon = '/static/image/AI/practice3.png'
          }

          // 根据索引为不同的课程标题添加不同的后缀
          let title = course.courseName
          if (index === 0) {
            title += '巩固练习'
          } else if (index === 1) {
            title += '复习回顾'
          } else if (index === 2) {
            title += '训练提升'
          }

          return {
            id: course.id,
            title: title,
            questionCount: 5,
            duration: 8,
            difficulty: '中等', 
            icon: icon
          }
        })
      } catch (error) {
        console.error('加载课程数据失败:', error)
        throw error
      }
    },

    // 返回上一页
    navigateBack() {
      this.toPage(-1)
    },

    // 开始推荐练习方法
    startPractice(practiceId) {
      // 跳转到练习页面 - 修改参数格式
      const practiceItem = this.recommendations.find(item => item.id === practiceId);
      this.toPage('/pages/exam/practice', {
        id: practiceId,
        title: practiceItem.title,
        count: 5 // 传递题目数量
      })
      console.log('跳转参数:', {
        type: 'practice',
        id: practiceId,
        title: practiceItem.title,
        count: 5
      });
    },

    // 切换FAQ展开状态
    toggleFaq(index) {
      this.expandedFaq = this.expandedFaq === index ? -1 : index
    },

    // 打开自定义出题弹出框
    openCustomPopup() {
      this.$refs.customPopup.open()
    },

    // 关闭自定义出题弹出框
    closeCustomPopup() {
      this.$refs.customPopup.close()
      // 重置表单
      this.customKeywords = ''
      this.customQuestionCount = ''
    },

    // 确认自定义出题
    confirmCustomPractice() {
      // 简单验证
      if (!this.customKeywords.trim()) {
        uni.showToast({
          title: '请输入关键词',
          icon: 'none'
        })
        return
      }

      if (!this.customQuestionCount || isNaN(this.customQuestionCount) || this.customQuestionCount <= 0) {
        uni.showToast({
          title: '请输入有效的题数',
          icon: 'none'
        })
        return
      }

      // 跳转到练习页面，传递自定义参数
      this.toPage('/pages/exam/practice', {
        title: this.customKeywords,
        count: parseInt(this.customQuestionCount)
      })

      console.log('自定义出题参数:', {
        type: 'custom',
        keywords: this.customKeywords,
        count: parseInt(this.customQuestionCount)
      });

      // 关闭弹出框并重置表单
      this.closeCustomPopup()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

.ai-practice-container {
  min-height: 100vh;
  background-color: #f8f9ff;
}

.header {
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  padding: 0 30rpx;

  .header-left {
    display: flex;
    align-items: center;
    flex: 1;

    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
    }

    .page-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.recommended-section {
  padding: 30rpx;
  background-color: #fff;
  margin-top: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }

    .section-more {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;

      uni-icons {
        margin-left: 8rpx;
      }
    }
  }

  .recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .recommendation-item {
      display: flex;
      align-items: center;
      padding: 24rpx;
      border: 2rpx solid #f0f0f0;
      border-radius: 12rpx;

      .recommendation-icon {
        width: 80rpx;
        height: 80rpx;
        background-color: #f0f7ff;
        border-radius: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 24rpx;

        image {
          width: 50rpx;
          height: 50rpx;
        }
      }

      .recommendation-info {
        flex: 1;

        .recommendation-title {
          font-size: 26rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 12rpx;
        }

        .recommendation-meta {
          display: flex;
          gap: 20rpx;

          .meta-item {
            display: flex;
            align-items: center;
            font-size: 22rpx;
            color: #999;

            uni-icons {
              margin-right: 6rpx;
            }
          }
        }
      }

      .start-btn {
        padding: 12rpx 32rpx;
        background-color: #476bff;
        color: #fff;
        border-radius: 24rpx;
        font-size: 24rpx;
        font-weight: bold;
      }
    }

    /* 自定义出题按钮样式 - 调整为与推荐列表协调 */
    .custom-button-container {
      margin-top: 10rpx;

      .custom-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24rpx;
        background-color: #f0f7ff;
        border: 2rpx dashed #476bff;
        border-radius: 12rpx;

        text {
          margin-left: 10rpx;
          font-size: 28rpx;
          color: #476bff;
          font-weight: bold;
        }
      }
    }
  }
}

.frequently-asked-section {
  padding: 30rpx;
  background-color: #fff;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 24rpx;
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;

    .faq-item {
      border-bottom: 2rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .faq-question {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;

        text {
          font-size: 26rpx;
          color: #333;
        }
      }

      .faq-answer {
        padding-bottom: 20rpx;
        text-indent: 2em;

        text {
          font-size: 24rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }
}

.custom-popup-content {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  animation: popupSlideIn 0.3s ease-out;

  /* 添加顶部装饰条 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8rpx;
    background: linear-gradient(90deg, #476bff, #8a9bff);
  }

  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 40rpx;
    padding-top: 10rpx;
    /* 添加标题装饰 */
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -15rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 8rpx;
      background-color: #f0f7ff;
      border-radius: 4rpx;
    }
  }

  .popup-form {
    .form-item {
      margin-bottom: 32rpx;

      .form-label {
        font-size: 26rpx;
        width: 200rpx;
        color: #333;
        font-weight: 500;
        display: block;
      }

      .form-tip {
        color: #999;
        font-size: 12px;
      }
      .form-input {
        width: 100%;
        padding: 0 30rpx;
        font-size: 26rpx;
        color: #333;
        background-color: #fafaff;
        transition: all 0.3s ease;


        &:focus {
          border-color: #476bff;
          background-color: #fff;
          box-shadow: 0 0 0 10rpx rgba(71, 107, 255, 0.05);
          outline: none;
        }

        &::placeholder {
          color: #b0b8d0;
        }
      }
    }
  }

  .popup-buttons {
    display: flex;
    margin-top: 50rpx;
    gap: 24rpx;

    .cancel-button,
    .confirm-button {
      flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 28rpx;
      font-weight: 500;
      border-radius: 16rpx;
      border: none;
      transition: all 0.3s ease;

      /* 移除原生按钮样式 */
      background-image: none;
      text-shadow: none;
    }

    .cancel-button {
      background-color: #f5f7ff;
      color: #666;

      &:active {
        background-color: #e8ebff;
        transform: scale(0.98);
      }
    }

    .confirm-button {
      background: linear-gradient(135deg, #476bff, #5a7cff);
      color: #fff;
      box-shadow: 0 6rpx 16rpx rgba(71, 107, 255, 0.3);

      &:active {
        transform: scale(0.98);
        box-shadow: 0 3rpx 8rpx rgba(71, 107, 255, 0.2);
      }
    }
  }
}

/* 弹出动画 */
@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20rpx);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 遮罩层样式优化 */
.uni-popup-cover {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8rpx);
}
</style>